<!--
 * @Author: 矫建武 1452239416@qq.com
 * @Date: 2024-10-18 09:52:15
 * @LastEditTime: 2024-10-18 15:17:52
 * @FilePath: \tool\src\views\tool\timeStamp.vue
 * @Description: 
 * 
 * @file: https://github.com/OBKoro1/koro1FileHeader/wiki/%E5%AE%89%E8%A3%85%E5%92%8C%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B
-->
<!-- 模块说明 -->

<style lang="scss" scoped>
.content-item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .current {
    font-size: 24px;
    font-weight: bold;
  }

  .ipt {
    width: 200px;
  }
}
</style>
<template>
  <div>
    <nav class="content-item">
      <div class="title">当前时间戳：&nbsp;</div>
      <span class="current">{{ current }}</span>
      <Buttons :options="options_01" />
    </nav>

    <section class="content-item">
      <div class="title">时间戳转换：&nbsp;</div>
      <el-input class="ipt" v-model="timeStamp" />
      <span style="padding: 0 5px">格式</span>
      <el-select class="ipt" v-model="formatVal">
        <el-option v-for="(ele, i) in selectOption" :value="ele.value" :key="i">{{
          ele.label
          }}</el-option>
      </el-select>
      <span>&nbsp;&nbsp;&nbsp;{{ timeFormat }}</span>
      <Buttons :options="options_02" />
    </section>

    <section class="content-item">
      <div class="title">转换为时间戳：&nbsp;</div>

      <div v-show="tabDateVal == 'date'">
        <el-date-picker v-model="dateNow" type="datetime" format="YYYY/MM/DD HH:mm:ss" class="ipt" />
      </div>

      <el-input v-show="tabDateVal == 'input'" v-model="dateNow" class="ipt"></el-input>
      <el-button @click="tab">切换</el-button>

      <span>&nbsp;&nbsp;&nbsp;{{ toTimeStamp }}</span>
      <Buttons :options="options_03" />
    </section>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { onMounted, ref, onUnmounted, computed } from 'vue'
import { copyText } from '@/utils'
const current = ref(Date.now())
const timeStamp = ref(Date.now())
const formatVal = ref('YYYY-MM-DD')

const dateNow = ref('')
const tabDateVal = ref('date')
let timer = null
const switchs = ref(true)
onMounted(() => {
  setTimer()
})

const setTimer = () => {
  timer = setInterval(() => {
    if (!switchs.value) return
    current.value = Date.now()
  }, 1000)
}

const tab = () => {
  dateNow.value = ''
  if (tabDateVal.value == 'date') {
    tabDateVal.value = 'input'
  } else {
    tabDateVal.value = 'date'
  }
}
const timeFormat = computed(() => {
  let str = dayjs(timeStamp.value - 0).format(formatVal.value)
  if (str == 'Invalid Date' || str == '1970-01-01 08-01-00') str = ''
  return str
})

const toTimeStamp = computed(() => {
  if (!dateNow.value) return
  if (tabDateVal.value == 'date') {
    return dayjs(dateNow.value).valueOf()
  } else {
    return dayjs(dateNow.value).valueOf() || ''
  }
})

const options_01 = [
  {
    text: () => (switchs.value ? '暂停' : '开始'),
    type: 'warning',
    click: () => {
      switchs.value = !switchs.value
    }
  },
  {
    text: '复制',
    type: 'primary',
    click: () => {
      copyText(current.value)
    }
  }
]

const options_02 = [
  {
    text: '复制',
    type: 'primary',
    click: () => {
      copyText(timeFormat.value)
    }
  }
]
const options_03 = [
  {
    text: '复制',
    type: 'primary',
    click: () => {
      copyText(toTimeStamp.value)
    }
  }
]

const selectOption = [
  {
    label: 'YYYY-MM-DD',
    value: 'YYYY-MM-DD'
  },
  {
    label: 'YYYY:MM:DD',
    value: 'YYYY:MM:DD'
  },
  {
    label: 'YYYY年MM月DD日',
    value: 'YYYY年MM月DD日'
  },
  {
    label: 'YYYY/MM/DD',
    value: 'YYYY/MM/DD'
  },
  {
    label: 'YYYY MM DD',
    value: 'YYYY MMMM DD'
  },
  {
    label: 'YYYYMMDD',
    value: 'YYYYMMDD'
  },
  {
    label: 'YYYY-MM-DD HH-MM-SS',
    value: 'YYYY-MM-DD HH-mm-ss'
  },
  {
    label: 'YYYY:MM:DD HH:MM:SS',
    value: 'YYYY:MM:DD HH:mm:ss'
  },
  {
    label: 'YYYY年MM月DD日 HH时MM分SS秒',
    value: 'YYYY年MM月DD日 HH时mm分ss秒'
  },
  {
    label: 'YYYY/MM/DD HH/MM/SS',
    value: 'YYYY/MM/DD HH/mm/ss'
  },
  {
    label: 'YYYY MM DD HH MM SS',
    value: 'YYYY MM DD HH mm ss'
  },
  {
    label: 'YYYYMMDD HHMMSS',
    value: 'YYYYMMDD HHmmss'
  }
]
onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>
